<template>
  <div class="goods">
    <h1 class="title">{{title}}</h1>
	<div class="con">
		<div class="item" 
		v-for="item in data" 
		:key="item.goodsId"
		@click="goInfo(item.goodsId)">
			<img :src="item.goodsCoverImg" alt="">
			<p>{{item.goodsIntro}}</p>
			<span>￥{{item.sellingPrice}}</span>
		</div>
	</div>
  </div>
</template>

<script>
export default {
  name: 'Goods',
  props: {//接收父组件传递过来的参数,并进行校验
	title:{
		type:String,
		required:true,
		default:""
	},
	data:{
		type:Array,
		required:true,
		default:[]
	}
  },
  methods:{
	  goInfo(aid){
		 this.$router.push("/info/"+aid); 
	  }
  }
}
</script>

<style scoped lang="less">
     .title{
		 height:50px;
		 line-height: 50px;
		 text-align: center;
		 font-weight: normal;
		 color:#1BAEAE;
		 background-color:#F9F9F9;
	 }
	 .con{
		 display: flex;
		 flex-wrap: wrap;
		 justify-content: space-between;
		 background-color: #E9E9E9;
		 .item{
			 width:45.8%;
			 text-align: center;
			 background-color: #fff;
			 padding:10px 2%;
			 img{
				 width:80%;
			 }
			 p{
				 font-size:14px;
			 }
			 span{
				 font-size:12px; 
				 color:#1BAEAE
			 }
			 margin-bottom:1px;
		 }
	 }
</style>
